<template>
  <a-modal
    width="900px"
    :bodyStyle="{ height: '350', overflow: 'auto' }"
    :visible="modalVisible"
    @cancel="handleCancel"
    :title="labelTitle"
  >
    <a-form-model ref="archivePunishRef" :rules="rules" :model="infoForm">

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol"  label="人事/监察部门" prop="relevant" has-feedback>
        <a-input v-model="infoForm.relevant" placeholder="请输入人事/监察部门" allowClear />
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="违反条例" prop="behavior" has-feedback>
        <a-textarea
          v-model="infoForm.behavior"
          allow-clear
          :maxLength="3000"
          :auto-size="{ minRows: 3, maxRows: 5 }"
          placeholder="请输入违反条例"
        />
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="相关规定" prop="violate"  has-feedback>
        <a-textarea
          v-model="infoForm.violate"
          allow-clear
          :maxLength="3000"
          :auto-size="{ minRows: 3, maxRows: 5 }"
          placeholder="请输入相关规定"
        />
      </a-form-model-item>
    </a-form-model>

    <template slot="footer">
      <div style="display: flex; justify-content: center">
        <a-button style="margin-right: 20px" @click="handleCancel"> 取消 </a-button>
        <a-button type="primary" icon="save" @click="onSubmit" :loading="loading"> 提交 </a-button>
      </div>
    </template>
  </a-modal>
</template>
<script>
import storage from 'store'
import { APP_USER, APP_DEPT } from '@/store/mutation-types'
import { startBusinessProced } from '@/api/accept/business_Approve'
import { Tp_archivetypeEnum } from '@/enumeration/Tp_proctype'
export default {
  props: {
    applyid: {
      type: String,
      required: true
    },
    processinstanceid: {
      type: String,
      required: true
    }
  },
  
  data() {
    return {
      labelCol: { span: 4 }, // label宽
      wrapperCol: { span: 16 }, // 组件宽
      loading: false, //按钮显示
      modalVisible: false, // 模态框显示
      infoForm: {
        applyid: '', // applyid
        proctype: '', // 操作分类
        userid: '',
        username: '',
        processinstanceid: '',
        cause: '', // 案由
        describe: '', // 行政复议申请
        relevant: undefined, //有关人事/监察部门
        behavior: '行政机关或者其工作人员）存在（违反行政复议法及其实施条例的行为） ', // 文本
        violate: '《中华人民共和国行政复议法》第xxx条的规定'
      },
      currentUser: storage.get(APP_USER), // 登录人信息
      currentDept: storage.get(APP_DEPT), // 登录人部门
      rules: {
        relevant: [{ required: true, message: '请输入人事/监察部门', trigger: 'blur' }],
        behavior: [
          { required: true, message: '请输入违反条例', trigger: 'blur' },
          { max: 3000, message: '长度不能超过3000', trigger: 'blur' },
        ],
        violate: [
          { required: true, message: '请输入相关规定', trigger: 'blur' },
          { max: 3000, message: '长度不能超过3000', trigger: 'blur' },
        ],
      },
      labelTitle: '',
      proctype: Tp_archivetypeEnum.execute_punish.key
    }
  },
  created() {
  },
  methods: {
    init() {
      this.modalVisible = true
      this.labelTitle = "政务处分"
      this.resetForm()

    },
    handleCancel() {
      this.resetForm()
      this.modalVisible = false
    },
    resetForm() {
        this.$nextTick(() => {
            this.$refs.archivePunishRef.resetFields()
        })
    },
    /**
     * 提交表单
     */
    onSubmit() {
      let _this = this
      this.$refs.archivePunishRef.validate((valid) => {
        _this.loading = true
        if (valid) {
          console.log('submit!', _this.infoForm)
          let params = {
            applyid: _this.applyid, // applyid
            proctype: _this.proctype, // 操作分类
            userid: _this.currentUser.userId,
            username: _this.currentUser.fullname,
            processinstanceid: _this.processinstanceid, // 流程实例id
            cause: _this.infoForm.cause, // 案由
            describe: _this.infoForm.describe, // 行政复议申请
          }
          let docfield = {
              relevant: _this.infoForm.relevant, //有关人事/监察部门
              behavior: _this.infoForm.behavior, // 文本
              violate: _this.infoForm.violate
          }
          console.log('入参参数：' + params)
          startBusinessProced(params, docfield).then((res) => {
            if (res.code !== 0) {
              _this.$message.error('操作失败')
            } else {
              _this.$message.success('操作成功')
              _this.$emit('reload')
              _this.$emit('close')
              _this.modalVisible = false
            }
            _this.loading = false
          })
        } else {
          _this.loading = false
          // 加延时器的目的是为了vue实例更新未完成，我们可能获取DOM失败的问题
          // 利用原生js的方式，获取所有失败的类名，获得一个数组，取第一个元素获取焦点
          setTimeout(() => {
            const isError = document.getElementsByClassName('has-error')
            const input = isError[0].querySelector('input')
            //console.log(input)
            if (input !== null && input !== 'undefind' && input !== '') {
              isError[0].querySelector('input').focus()
                ? isError[0].querySelector('input').focus()
                : isError[0].querySelector('input').click()
            } else {
              isError[0].querySelector('textarea').focus()
            }
          }, 10)
          return false
        }
      })
    },
  },
}
</script>
    
<style lang="scss" scoped></style>
        